<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onPageScroll, onShow } from "@dcloudio/uni-app";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import { gwInfo } from "@/apis/shop";
const userStore = useUserStore();
const navbarFixed = ref(false);
const bgColor = ref("transparent");
const detailId = ref("");
const dictName = ref("");
const leng = ref("0");
const wide = ref("0");
const heg = ref("0");
const collectionNumber = ref("");
const imagesSrc = ref("");
const describes = ref("");
const currentPrice = ref("");
const userName = ref("");
const titles = ref("");
let producingArea = ref('')
const options2 = ref({
  data: "",
  size: 300,
  useDynamicSize: false,
  errorCorrectLevel: "Q",
  margin: 10,
  areaColor: "#F95F6B",
  backgroundColor: "#3c9cff",
  // 指定二维码前景，一般可在中间放logo
  foregroundImageSrc: "",
});
const leftClick = () => {
  uni.navigateBack();
};
onShow(async () => { });
onLoad((options: any) => {
  console.log(options.orderId, "天幕");
  detailId.value = options.orderId ?? "";
  initQrCode();
  getGwInfo();
});
// 打开分享
onShareAppMessage((e: any) => {
  //console.log("----分享----", e);
  return {
    title: "",
    path: `/pagesMerchand/stone-details?id=${detailId.value}`,
  };
});
//分享到朋友圈
onShareTimeline((e: any) => {
  //console.log("----分享到朋友圈----", e);
  return {
    title: "",
    query: `id=${detailId.value}`,
    path: `/pagesMerchand/stone-details?id=${detailId.value}`,
  };
});
// 初始化二维码
const initQrCode = () => {
  options2.value.data = `https://www.stoneplayer.com/?id=${detailId.value}`;
  console.log(options2.value.data, "options2");
};
const getGwInfo = async () => {
  let res: any = await gwInfo({
    id: Number(detailId.value),
  });
  if (res.code == 200) {
    console.log(res, "getGwInfo");
    let data = JSON.parse(res.data.dict);
    // console.log(data[1].name, 'data')
    if (data[1]) {
      dictName.value = data[1].name ?? "";
    }
    // 长 宽 高
    leng.value = res.data.leng;
    wide.value = res.data.wide;
    heg.value = res.data.heg;
    describes.value = res.data.describes;
    currentPrice.value = res.data.currentPrice;
    userName.value = res.data.shopName;
    titles.value = res.data.title;
    // 编号
    collectionNumber.value = res.data.collectionNumber;
    producingArea.value = res.data.producingArea;
    imagesSrc.value = res.data.promotional;
    // console.log(res.data.images?.split(","));
    // let imgs = res.data.images?.split(",");
    // uni.request({
    //   url: imgs[0] + "?x-oss-process=image/info", //仅为示例，并非真实接口地址。
    //   data: {
    //     text: "uni.request",
    //   },
    //   header: {
    //     "custom-header": "hello", //自定义请求头信息
    //   },
    //   success: (res) => {
    //     console.log('宽高', res.data);
    //     // 当宽比高传大 后缀加?x-oss-process=image/resize,w_356,h_247,m_fill，
    //     // 如果高比宽大，后缀加?x-oss-process=image/resize,h_247/auto-orient,0
    //     // 显示图片的宽度就行
    //     // if(res.data&&res.data.ImageWidth.value>res.data.ImageHeight.value) {
    //     //   imagesSrc.value = imgs[0] + '?x-oss-process=image/resize,w_356,h_247,m_fill'
    //     // } else {
    //     //   imagesSrc.value = imgs[0] + '?x-oss-process=image/resize,h_247/auto-orient,0'
    //     // }
    //     imagesSrc.value = imgs[0]
    //   }
    // });

  }
};
</script>

<template>
  <view class="backdrop">
    <uv-navbar title="奇石身份码" titleStyle="color:#ffffff" :fixed="navbarFixed" leftIconColor="#fff" :back="false"
      :bgColor="bgColor" @leftClick="leftClick"></uv-navbar>
    <image src="../static/images/backdrop.png" class="bg-img" />
    <view class="box">
      <view class="title-text">{{ titles }}</view>
      <view class="line"></view>
      <view class="flex qr-code">
        <view class="code-box">
          <view class="text">奇石身份码</view>
          <!-- <image src="../../static/images/avatar_default.png" mode="scaleToFill" /> -->
          <uv-qrcode ref="qrcode" size="158rpx" :value="`https://www.stoneplayer.com/?id=${detailId}`"></uv-qrcode>
          <view class="id">ID：{{ collectionNumber }}</view>
        </view>
        <view class="characters">
          <view class="crosswise" v-if="dictName">
            <text>石 种</text>
            <text class="text-characters">{{ dictName }}</text>
          </view>
          <view class="crosswise" v-if="producingArea">
            <text>产 地</text>
            <text class="text-characters">{{ producingArea }}</text>
          </view>
          <view class="crosswise">
            <text>尺 寸</text>
            <text class="text-characters">{{ leng }} * {{ wide }} * {{ heg }} cm</text>
          </view>
          <view class="crosswise">
            <text>编 号</text>
            <text class="text-characters">{{ collectionNumber }}</text>
          </view>
        </view>
      </view>
      <view class="img-box">
        <image :src="imagesSrc" mode="heightFix" />
      </view>
      <view class="text-box padding-box">
        <view>{{ describes }}</view>
      </view>
      <view class="line2"></view>
      <view class="text-box align-box">
        <view class="box2">
          <!-- <view>
          荣          誉
        </view>
        <view>
         <text>交易次数</text>
         <text>0</text>
        </view> -->
          <view class="item-box">
            交 易 价 格 <text class="current-price">{{ currentPrice }}</text>
          </view>
          <view class="collector item-box" v-if="userName">
            收 藏 人 <text class="user-name">{{ userName ? userName : "" }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style>
page {
  width: 100%;
  height: 100%;
  background-color: #7c1616;
}
</style>
<style lang="scss" scoped>
.backdrop {
  position: relative;

  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
  }

  .box {
    padding: 0 34rpx;
  }

  .title-text {
    margin: 36rpx 0 44rpx;
    font-weight: 900;
    font-size: 60rpx;
    color: #fffcf6;
    text-align: center;
  }

  .line {
    width: 704rpx;
    height: 2rpx;
    border: 2rpx solid #fffcf6;
  }

  .qr-code {
    margin-top: 40rpx;

    .code-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 52rpx 34rpx;
      width: 236rpx;
      height: 268rpx;
      border-radius: 28rpx;
      border: 2rpx solid #fffcf6;
      font-size: 26rpx;
      color: #fff;

      image {
        position: absolute;
        width: 168rpx;
        height: 168rpx;
      }

      .text {
        position: absolute;
        top: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
      }

      .id {
        position: absolute;
        bottom: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24rpx;
        white-space: nowrap;
      }
    }
  }

  .characters {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 80rpx;
    font-weight: 900;
    font-size: 30rpx;
    color: #fffcf6;
    line-height: 42rpx;

    .text-characters {
      margin-left: 32rpx;
      font-size: 28rpx;
    }
  }

  .img-box {
    margin-top: 40rpx;
    text-align: center;

    image {
      max-width: 100%;
      // min-width: 40rpx;
      height: 358rpx;
    }
  }

  .text-box {
    margin-top: 26rpx;
    font-weight: bold;
    font-style: 26rpx;
    color: #fffcf6;
    text-align: center;

    view {
      margin-top: 12rpx;
    }
  }

  .padding-box {
    padding: 0 40rpx;
    font-style: 24rpx;
  }

  .line2 {
    margin: 40rpx 0 48rpx;
    border: 2rpx solid #fffcf6;
  }

  .box2 {
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: self-start;
    text-align: left;
    min-width: 48%;
    margin: 0 auto;
    white-space: nowrap;
    font-size: 30rpx;

    .collector {
      margin-top: 20rpx;
      letter-spacing: 12rpx;
    }

    .current-price {
      margin-left: 30rpx;
      font-size: 30rpx;
    }

    .user-name {
      font-size: 28rpx;
    }
  }

  .align-box {
    display: flex;
    justify-content: center;

    .item-box {}
  }
}
</style>
